<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐读书社</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Noto Serif SC', serif;
            background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
            min-height: 100vh;
            color: #2d3748;
            position: relative;
            overflow-x: hidden;
            padding-bottom: 40px;
        }
        .nav {
            background: rgba(255, 255, 255, 0.98);
            padding: 12px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            margin-bottom: 15px; /* 减小间距 */
        }
        .nav-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-logo {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 32px;
            font-weight: 400;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            letter-spacing: 2px;
        }
        .nav-links {
            display: flex;
            gap: 25px;
            align-items: center;
        }
        .nav-link {
            color: #64748b;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: color 0.3s ease;
            padding: 6px 12px;
            border-radius: 8px;
        }
        .nav-link:hover {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }
        .nav-link.active {
            color: #2563eb;
            background: rgba(59, 130, 246, 0.15);
        }
        .geometric-lines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        .line {
            position: absolute;
            background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
            transform-origin: center;
            transition: all 1s ease;
        }
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 30px;
        }
        .header {
            text-align: center;
            padding: 30px 0; /* 减小间距 */
            position: relative;
        }
        .header h1 {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 3.5rem;
            font-weight: 400;
            font-size: 3.2rem;
            font-weight: 900;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem; /* 减小间距 */
            letter-spacing: -1px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            animation: fadeIn 1s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .search-section {
            background: rgba(255, 255, 255, 0.98);
            padding: 25px; /* 减小内边距 */
            border-radius: 30px;
            margin-bottom: 25px; /* 减小间距 */
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .search-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.12);
        }
        .search-box {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px; /* 减小间距 */
            position: relative;
        }
        .search-input {
            width: 700px;
            padding: 20px 35px;
            border: 2px solid #e2e8f0;
            border-radius: 25px;
            font-size: 17px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.95);
            color: #1e293b;
            font-weight: 500;
            letter-spacing: 0.3px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }
        .search-input::placeholder {
            color: #94a3b8;
            font-weight: 400;
        }
        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 8px 20px rgba(0, 0, 0, 0.06);
            transform: scale(1.02);
            background: #fff;
        }
        .search-button {
            padding: 14px 32px;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: white;
            border: none;
            border-radius: 20px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
            letter-spacing: 0.5px;
            height: fit-content;
            align-self: center;
        }
        .search-button:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
            background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
        }
        .search-button:active {
            transform: scale(0.98);
        }
        .category-filters {
            display: flex;
            justify-content: center;
            gap: 12px; /* 减小间距 */
            flex-wrap: wrap;
            padding: 0 20px; /* 减小内边距 */
        }
        .category-tag {
            padding: 8px 18px; /* 减小内边距 */
            border-radius: 30px;
            background: #f8fafc;
            color: #64748b;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        .category-tag:hover {
            background: #f1f5f9;
            color: #3b82f6;
            border-color: #3b82f6;
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(59, 130, 246, 0.2);
        }
        .category-tag.active {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
        }
        .main-content {
            display: flex;
            gap: 20px; /* 减小间距 */
        }
        .book-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 15px; /* 减小间距 */
        }
        .book-card {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 20px;
            padding: 15px; /* 减小内边距 */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.5s ease;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            gap: 15px; /* 减小间距 */
            position: relative;
        }
        .book-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }
        .book-cover {
            width: 140px;
            height: 190px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
            transition: transform 0.4s ease;
        }
        .book-card:hover .book-cover {
            transform: rotate(-3deg) scale(1.05);
        }
        .book-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 6px 0;
        }
        .book-title {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 6px; /* 减小间距 */
            color: #1e293b;
            letter-spacing: -0.5px;
        }
        .book-author {
            font-size: 16px;
            color: #64748b;
            margin-bottom: 10px; /* 减小间距 */
            font-weight: 500;
        }
        .book-desc {
            font-size: 15px;
            color: #64748b;
            line-height: 1.7;
            margin-bottom: 12px; /* 减小间距 */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .book-meta {
            display: flex;
            align-items: center;
            gap: 12px; /* 减小间距 */
            font-size: 14px;
            color: #94a3b8;
            font-weight: 500;
        }
        .book-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .rankings {
            width: 350px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 24px;
            padding: 20px; /* 减小内边距 */
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: transform 0.4s ease;
            height: fit-content;
        }
        .rankings:hover {
            transform: translateY(-3px);
        }
        .rankings h2 {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2rem;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 15px; /* 减小间距 */
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.5px;
        }
        .ranking-list {
            list-style: none;
        }
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 10px 0; /* 减小内边距 */
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            cursor: pointer;
            transition: all 0.4s ease;
        }
        .ranking-item:hover {
            transform: translateX(8px);
            background: rgba(59, 130, 246, 0.08);
            border-radius: 14px;
            padding: 10px 12px; /* 减小内边距 */
        }
        .ranking-number {
            font-size: 24px;
            font-weight: 900;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-right: 15px; /* 减小间距 */
            min-width: 30px;
        }
        .ranking-info {
            flex: 1;
        }
        .ranking-title {
            font-weight: 700;
            margin-bottom: 3px; /* 减小间距 */
            color: #1e293b;
            font-size: 16px;
        }
        .ranking-author {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px; /* 减小间距 */
            gap: 8px; /* 减小间距 */
        }
        .pagination button {
            padding: 8px 16px; /* 减小内边距 */
            border: 2px solid #e2e8f0;
            background: white;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.4s ease;
            font-weight: 600;
            color: #64748b;
            min-width: 45px;
            font-size: 15px;
        }
        .pagination button:hover {
            background: #f1f5f9;
            border-color: #3b82f6;
            color: #3b82f6;
            transform: translateY(-2px);
        }
        .pagination button.active {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
        }
        .footer {
            text-align: center;
            padding: 15px 0; /* 减小内边距 */
            background: rgba(255, 255, 255, 0.9);
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        .footer p {
            color: #64748b;
            font-size: 14px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <nav class="nav">
        <div class="nav-container">
            <div class="nav-logo">乐读书社</div>
            <div class="nav-links">
                <a href="#" class="nav-link active">首页</a>
                <a href="#" class="nav-link">分类</a>
                <a href="#" class="nav-link">排行榜</a>
                <a href="#" class="nav-link">收藏</a>
                <a href="#" class="nav-link">关于</a>
            </div>
        </div>
    </nav>

    <div class="geometric-lines"></div>
    <div class="container">
        
        <div class="search-section">
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索书籍、作者或关键词...">
                <button class="search-button">搜索</button>
            </div>
            <div class="category-filters">
                <span class="category-tag active">全部</span>
                <span class="category-tag">小说</span>
                <span class="category-tag">文学</span>
                <span class="category-tag">科幻</span>
                <span class="category-tag">历史</span>
                <span class="category-tag">哲学</span>
                <span class="category-tag">经济</span>
                <span class="category-tag">艺术</span>
            </div>
        </div>

        <div class="main-content">
            <div class="book-list">
                <div class="book-card">
                    <img src="https://img2.doubanio.com/view/subject/s/public/s2768378.jpg" alt="三体封面" class="book-cover">
                    <div class="book-info">
                        <h3 class="book-title">三体</h3>
                        <p class="book-author">刘慈欣</p>
                        <p class="book-desc">科幻小说的巅峰之作，讲述了地球文明与三体文明的惊心动魄的第一次接触。在人类文明与三体文明的博弈中，将带领读者领略科幻小说的魅力。</p>
                        <div class="book-meta">
                            <span>科幻</span>
                            <span>|</span>
                            <span>重庆出版社</span>
                            <span>|</span>
                            <span>500K+阅读</span>
                        </div>
                    </div>
                </div>

                <div class="book-card">
                    <img src="https://img1.doubanio.com/view/subject/s/public/s29053580.jpg" alt="活着封面" class="book-cover">
                    <div class="book-info">
                        <h3 class="book-title">活着</h3>
                        <p class="book-author">余华</p>
                        <p class="book-desc">《活着》是余华最具代表性的作品，讲述了农村人福贵悲惨的人生遭遇。福贵六十多年的经历，沧海桑田，几度世事变迁，但仍顽强地活着。</p>
                        <div class="book-meta">
                            <span>文学</span>
                            <span>|</span>
                            <span>作家出版社</span>
                            <span>|</span>
                            <span>300K+阅读</span>
                        </div>
                    </div>
                </div>

                <div class="book-card">
                    <img src="https://img9.doubanio.com/view/subject/s/public/s6384944.jpg" alt="百年孤独封面" class="book-cover">
                    <div class="book-info">
                        <h3 class="book-title">百年孤独</h3>
                        <p class="book-author">加西亚·马尔克斯</p>
                        <p class="book-desc">本书描写了布恩迪亚家族七代人的传奇故事，以独特的魔幻现实主义手法，展现了拉丁美洲的历史、神话与现实。</p>
                        <div class="book-meta">
                            <span>文学</span>
                            <span>|</span>
                            <span>南海出版社</span>
                            <span>|</span>
                            <span>200K+阅读</span>
                        </div>
                    </div>
                </div>

                <div class="book-card">
                    <img src="https://img9.doubanio.com/view/subject/s/public/s27814883.jpg" alt="人类简史封面" class="book-cover">
                    <div class="book-info">
                        <h3 class="book-title">人类简史</h3>
                        <p class="book-author">尤瓦尔·赫拉利</p>
                        <p class="book-desc">这是一部讲述人类如何从史前时代走到21世纪的历史。作者用宏大的视角，将人类发展史上的重要革命娓娓道来。</p>
                        <div class="book-meta">
                            <span>历史</span>
                            <span>|</span>
                            <span>中信出版社</span>
                            <span>|</span>
                            <span>150K+阅读</span>
                        </div>
                    </div>
                </div>

                <div class="pagination">
                    <button>&lt;</button>
                    <button class="active">1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>...</button>
                    <button>10</button>
                    <button>&gt;</button>
                </div>
            </div>

            <div class="rankings">
                <h2>热门榜单</h2>
                <ul class="ranking-list">
                    <li class="ranking-item">
                        <span class="ranking-number">1</span>
                        <div class="ranking-info">
                            <div class="ranking-title">三体</div>
                            <div class="ranking-author">刘慈欣</div>
                        </div>
                    </li>
                    <li class="ranking-item">
                        <span class="ranking-number">2</span>
                        <div class="ranking-info">
                            <div class="ranking-title">活着</div>
                            <div class="ranking-author">余华</div>
                        </div>
                    </li>
                    <li class="ranking-item">
                        <span class="ranking-number">3</span>
                        <div class="ranking-info">
                            <div class="ranking-title">百年孤独</div>
                            <div class="ranking-author">加西亚·马尔克斯</div>
                        </div>
                    </li>
                    <li class="ranking-item">
                        <span class="ranking-number">4</span>
                        <div class="ranking-info">
                            <div class="ranking-title">围城</div>
                            <div class="ranking-author">钱钟书</div>
                        </div>
                    </li>
                    <li class="ranking-item">
                        <span class="ranking-number">5</span>
                        <div class="ranking-info">
                            <div class="ranking-title">平凡的世界</div>
                            <div class="ranking-author">路遥</div>
                        </div>
                    </li>
                    <li class="ranking-item">
                        <span class="ranking-number">6</span>
                        <div class="ranking-info">
                            <div class="ranking-title">人类简史</div>
                            <div class="ranking-author">尤瓦尔·赫拉利</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // 创建几何线条背景
        function createGeometricLines() {
            const container = document.querySelector('.geometric-lines');
            const numLines = 20;
            
            for (let i = 0; i < numLines; i++) {
                const line = document.createElement('div');
                line.className = 'line';
                
                // 随机设置线条属性
                updateLine(line);
                
                container.appendChild(line);
            }
        }

        function updateLine(line) {
            const width = Math.random() * 3 + 1;
            const length = Math.random() * 200 + 100;
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * window.innerHeight;
            const rotation = Math.random() * 360;
            const opacity = Math.random() * 0.3 + 0.1;

            line.style.width = `${width}px`;
            line.style.height = `${length}px`;
            line.style.left = `${x}px`;
            line.style.top = `${y}px`;
            line.style.transform = `rotate(${rotation}deg)`;
            line.style.opacity = opacity;
        }

        // 初始化几何线条
        createGeometricLines();

        // 定期更新线条位置和样式
        setInterval(() => {
            document.querySelectorAll('.line').forEach(line => {
                updateLine(line);
            });
        }, 3000);

        // 搜索功能实现
        document.querySelector('.search-button').addEventListener('click', function() {
            const searchTerm = document.querySelector('.search-input').value.trim();
            if (searchTerm) {
                // TODO: 调用后端API进行搜索
                console.log('搜索关键词:', searchTerm);
            }
        });

        // 分类过滤功能
        const categoryTags = document.querySelectorAll('.category-tag');
        categoryTags.forEach(tag => {
            tag.addEventListener('click', function() {
                categoryTags.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const category = this.textContent;
                console.log('选中分类:', category);
            });

        });

        // 回车触发搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-button').click();
            }
        });

        // 分页功能
        document.querySelectorAll('.pagination button').forEach(button => {
            button.addEventListener('click', function() {
                if (this.textContent !== '...' && !this.classList.contains('active')) {
                    document.querySelector('.pagination button.active').classList.remove('active');
                    this.classList.add('active');
                    console.log('切换到页码:', this.textContent);
                }
            });
        });
    </script>
</body>
</html>
